<script setup lang="ts">
import { onMounted } from "vue";
import { useUser } from "@/stores/useUser";
import * as echarts from "echarts";

const userStore = useUser();
onMounted(() => {
	const a = echarts.init(document.getElementById("chart"));
	a.setOption({
		color: ["#cc0000"],
		xAxis: {
			type: "category",
			data: ["12-01", "12-02", "12-03", "12-04", "12-05", "12-06", "12-07"],
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: [2, 0, 0, 1, 1, 2, 3],
				type: "bar",
			},
		],
	});
});
</script>

<template>
	<div class="home">
		<template v-if="userStore.token">
			<h1>尊敬的超级管理员，欢迎回来！</h1>
			<p>今日新增报名 3 名学生。</p>
			<div id="chart"></div>
		</template>
		<p v-else>您好，请登录。</p>
	</div>
</template>

<style scoped lang="scss">
.home {
	padding: 10px;
	h1 {
		font-size: 26px;
	}
	p {
		font-size: 16px;
	}
	#chart {
		width: 600px;
		height: 500px;
	}
}
</style>
